<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">  
            <h:form>
                <p:panel header="#{MBCategoriaArticulo.comando.nombre eq 'Guardar'?'REGISTRAR CATEGORIA':'ACTUALIZAR CATEGORIA'}" style="width:70%;margin: 10px auto;">
                    <p:panelGrid style="width: 80%;margin:0px auto;border:0px;padding: 0 5px">

                        <p:row>
                            <p:column style="width: 130px">
                                <h:outputText value="#{MBCategoriaArticulo.comando.nombre eq 'Guardar'?'TIPO CATEGORIA(*): ':'TIPO CATEGORIA: '}" styleClass="lblForm" />
                            </p:column>

                            <p:column style="width: 130px">
                                <p:selectOneMenu id="cbxTipoCategoria" value="#{BKCategoriaArticulo.categoriaArticuloFormulario.tipoCategoria}" 
                                                 required="true" style="width: 180px" >   
                                    <f:selectItem itemLabel="Seleccionar" itemValue="0" /> 
                                    <f:selectItems value="#{BKCategoriaArticulo.listaTipoCategoria}"
                                                   var="tipoCategoria" itemLabel="#{tipoCategoria.desParametroDet}"
                                                   itemValue="#{tipoCategoria.valCadena}"/>
                                    <p:ajax event="change" update="outpMateriales,outpCategorias,cbxCategoriaPadre" listener="#{MBCategoriaArticulo.buscarCategoriasPadre}" />
                                </p:selectOneMenu> 
                                <p:message for="cbxTipoCategoria" display="text"/>
                            </p:column>

                        </p:row>

                        <p:row>
                            <p:column colspan="2" style="padding-left: 0px;width: 130px" >
                                <!-- <p:column colspan="2" style="padding-left: 0px;width: 130px" >-->    
                                <p:outputPanel id="outpMateriales" layout="block" >
                                    <p:panelGrid style="margin: 10px 0;" 
                                                 rendered="#{BKCategoriaArticulo.lisCategoriaArticulosPadres eq null?'true':'false'}">
                                        <p:row>
                                            <p:column style="width: 230px">
                                                <h:outputText value="TIPO ARTICULO(*): "
                                                              styleClass="lblForm" />
                                            </p:column>
                                            <p:column style="width: 130px">
                                                <p:selectOneMenu id="cbxMaterial" value="#{BKCategoriaArticulo.categoriaArticuloFormulario.tipoMaterial}" 
                                                                 required="true" style="width: 180px">   
                                                    <f:selectItem itemLabel="Seleccionar" itemValue=""/> 
                                                    <f:selectItems value="#{BKCategoriaArticulo.listaTipoMaterial}"
                                                                   var="tipoMaterial" itemLabel="#{tipoMaterial.desParametroDet}"
                                                                   itemValue="#{tipoMaterial.valCadena}" />
                                                </p:selectOneMenu>  
                                                <p:message for="cbxMaterial" display="text"/> 
                                            </p:column>

                                        </p:row>

                                        <p:row>
                                            <p:column style="width: 130px" >
                                                <h:outputText value="TIPO DE MATERIAL(*): " styleClass="lblForm" /> 
                                            </p:column>
                                            <p:column style="width: 130px">
                                                <p:selectOneMenu id="cbxTipoMaterial" value="#{BKCategoriaArticulo.categoriaArticuloFormulario.tipoInsumo}" 
                                                                 required="true" style="width: 180px">   
                                                    <f:selectItem itemLabel="Seleccionar" itemValue=""/> 
                                                    <f:selectItems value="#{BKCategoriaArticulo.listaTipoArticulo}"
                                                                   var="tipoArticulo" itemLabel="#{tipoArticulo.desParametroDet}"
                                                                   itemValue="#{tipoArticulo.valCadena}"/>
                                                </p:selectOneMenu>  
                                                <p:message for="cbxTipoMaterial" display="text"/>
                                            </p:column>
                                        </p:row>

                                        <p:row>
                                            <p:column style="width: 230px">
                                                <h:outputText value="CODIGO(*): "
                                                              styleClass="lblForm" />
                                            </p:column>
                                            <p:column style="width: 130px">
                                                <p:inputText onkeyup="cambiarMayuscula(this)" id="txtCodigo" value="#{BKCategoriaArticulo.categoriaArticuloFormulario.codigo}" 
                                                             required="true" maxlength="2" size="3"/>
                                                <p:message for="txtCodigo" display="text"/>
                                            </p:column>

                                        </p:row>

                                    </p:panelGrid>
                                </p:outputPanel>

                                <p:outputPanel id="outpCategorias" layout="block" >
                                    <p:panelGrid style="margin: 10px 0;" 
                                                 rendered="#{BKCategoriaArticulo.lisCategoriaArticulosPadres eq null?'false':'true'}">
                                        <p:row>
                                            <p:column style="width: 230px">
                                                <h:outputText value="#{MBCategoriaArticulo.comando.nombre eq 'Guardar'?'CATEGORIA PADRE(*): ':'CATEGORIA PADRE: '}" styleClass="lblForm" />  
                                            </p:column>
                                            <p:column  style="width: 130px">
                                                <p:selectOneMenu value="#{BKCategoriaArticulo.idCategoriaArticuloPadre}" id="cbxCategoriaPadre" style="width: 180px"
                                                                 disabled="#{BKCategoriaArticulo.lisCategoriaArticulosPadres eq null?true:false}" required="true" >  
                                                    <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                                                    <f:selectItems var="padre" itemLabel="#{padre.nombre}" itemValue="#{padre.id}"
                                                                   value="#{BKCategoriaArticulo.lisCategoriaArticulosPadres}"/>  
                                                </p:selectOneMenu>  
                                                <p:message for="cbxCategoriaPadre" display="text"/>
                                            </p:column>

                                        </p:row>
                                    </p:panelGrid>
                                </p:outputPanel>

                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="width: 130px">
                                <h:outputText value="#{MBCategoriaArticulo.comando.nombre eq 'Guardar'?'NOMBRE(*): ':'NOMBRE: '}" style="font-weight: bold"/>
                            </p:column>
                            <p:column style="width: 130px">
                                <p:inputText onkeyup="cambiarMayuscula(this)" id="txtNombre" value="#{BKCategoriaArticulo.categoriaArticuloFormulario.nombre}" required="true" maxlength="50"/>
                                <p:message for="txtNombre" display="text"/>
                            </p:column>
                        </p:row>
                    </p:panelGrid> 
                    <br/>
                    <h:panelGrid columns="2" style="width: 300px;margin: 0px auto;">
                        <p:commandButton action="#{MBCategoriaArticulo.comando.aceptar()}" ajax="false" value="#{MBCategoriaArticulo.comando.nombre}" style="float: right;"/>
                        <p:commandButton action="#{MBCategoriaArticulo.cancelar()}" ajax="false" immediate="true" value="Cancelar"/>
                    </h:panelGrid> 
                    <h:panelGrid styleClass="mensaje_obligatorio">(*) Campos Requeridos</h:panelGrid>
                </p:panel>

            </h:form>

        </ui:define>
    </ui:composition>
</html>   